{% extends "base.html" %}
{% load i18n %}
{% block pageContent %}
	<div>
		<div class="indexVideoBlock">
			<h2>{% trans "Top Videos" %}</h2>
			<ul class="videoList">
			{% for videoInfo in topVideoInfos %}
				<li class="videoList">
					<a href="http://{{ siteHostname }}/loop/youtube/{{ videoInfo.videoID }}">
						<img src="{{ videoInfo.thumbURL }}" width="120" height="90"/>
						<span class="tooltip">
							{{ videoInfo.title }}
							<br/>{% trans "Views" %}: {{ videoInfo.countTotal }}
						</span>
					</a>
				</li>
			{% endfor %}
			</ul>
			<p align="right"><a href="/topvideos">{% trans "More videos" %}...</a></p>
		</div>
		<div class="indexPlaylistBlock">
			<h2>{% trans "Top Playlists" %}</h2>
			<ul>
			{% for playlist in topPlaylists %}
				<li>
					<a href="http://{{ siteHostname }}/playlist/{{ playlist.getKey }}">
						{{ playlist.title }}
						<span class="tooltip">
							{% trans "Created by" %}: 
							{% if playlist.user %}
								{{ playlist.user.nickname }}
							{% else %}
								{% trans "Guest" %}
							{% endif %}
							{% if playlist.numVideos %}
							<br/>
								{% blocktrans count playlist.numVideos as numVideos %}
									{{ numVideos }} Video
								{% plural %}
									{{ numVideos }} Videos
								{% endblocktrans %}
							{% endif %}
							{% if playlist.countTotal %}
								<br/>
								{% trans "Views" %}: {{ playlist.countTotal }}
							{% endif %}
						</span>
					</a>
				</li>
			{% endfor %}
			</ul>
		</div>
	</div>
	<div>
		<div class="indexVideoBlock">
			<h2>{% trans "Recently Looped Videos" %}</h2>
			<ul class="videoList">
			{% for videoInfo in recentVideoInfos %}
				<li class="videoList">
					<a href="http://{{ siteHostname }}/loop/youtube/{{ videoInfo.videoID }}">
						<img src="{{ videoInfo.thumbURL }}" width="120" height="90"/>
						<span class="tooltip">
							{{ videoInfo.title }}
							<br/>{% trans "Views" %}: {{ videoInfo.countTotal }}
						</span>
					</a>
				</li>
			{% endfor %}
			</ul>
			<p align="right"><a href="/recentvideos">{% trans "More videos" %}...</a></p>
		</div>
		<div class="indexPlaylistBlock">
			<h2>{% trans "Recently Created Playlists" %}</h2>
			<ul>
			{% for playlist in recentCreatedPlaylists %}
				<li>
					<a href="http://{{ siteHostname }}/playlist/{{ playlist.getKey }}">
						{{ playlist.title }}
						<span class="tooltip">
							{% trans "Created by" %}: 
							{% if playlist.user %}
								{{ playlist.user.nickname }}
							{% else %}
								{% trans "Guest" %}
							{% endif %}
							{% if playlist.numVideos %}
								<br/>
								{% blocktrans count playlist.numVideos as numVideos %}
									{{ numVideos }} Video
								{% plural %}
									{{ numVideos }} Videos
								{% endblocktrans %}
							{% endif %}
							{% if playlist.countTotal %}
								<br/>
								{% trans "Views" %}: {{ playlist.countTotal }}
							{% endif %}
						</span>
					</a>
				</li>
			{% endfor %}
			</ul>
		</div>
	</div>
{% endblock pageContent %}